<!-- 交易价格 -->
<template>
	<section>
		<el-col :span="24" class="toolbar">
			<div class="title">
				<div class="title_left">
					<p class="title_text">交易状态：</p>
					<p v-if="this.Status == '0'" style="margin-right:10px;">关闭</p>
					<p v-else-if="this.Status == '1'" style="margin-right:10px;">正常</p>
					<el-button  v-if="this.Status == '0'" type="success" size="small" @click="handleOpen(1)">开启</el-button>
					<el-button v-else-if="this.Status == '1'" type="danger" size="small" @click="handleOpen(0)">关闭</el-button>
				</div>
				<el-button type="primary" size="small" @click="handleEdit()" style="width: 100px;">修改</el-button>
			</div>
		</el-col>
		<!--列表-->
		<el-table :data="List" highlight-current-row v-loading="loading" @selection-change="selsChange" border :cell-style="cellStyle" :header-cell-style="rowClass" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column prop="id" align="center" label="ID" >
			</el-table-column>
			<el-table-column prop="startInterval" align="center" label="最小值" >
			</el-table-column>
			<el-table-column prop="endInterval" align="center" label="最大值" >
			</el-table-column>
			<el-table-column prop="price" align="center" label="现价" >
			</el-table-column>

		</el-table>
		<!--编辑界面-->
		<el-dialog title="价格修改" :visible.sync="editFormVisible" width="50%" :before-close="handleClose">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
				<el-form-item label="输入价格" prop="price">
					<el-input v-model="editForm.price" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editSubmit" :loading="editLoading">确定</el-button>
			</div>
		</el-dialog>
	</section>
</template>
<script>
	import util from '../../../common/js/util'
	import {
		getPriceList,
		editPrice,
		getTradeStatus,
		editTradeStatus,
		Refreshtoken
	} from '../../../api/api';
	
	export default {
		data() {
			return {
				timer: null,
				total: 0,
				page: 1,
				sels: [],//列表选中列
				loading: false,
				List: [],
				Status:{},
				editFormVisible:false,
				addLoading: false,
				editLoading: false,
				// 修改界面数据
				editForm: {
					price: ''
				},
				editFormRules: {
					price: [{
						required: true,
						message: '请输入价格',
						trigger: 'blur'
					}]
				},
			}
		},
		mounted() {
			this.getPrice()
			this.queryInfo();
			this.timer = setInterval(() => {
			   setTimeout(this.queryInfo, 0)
			}, 600000)
		},
		methods: {
			getPrice(){
				var Token = sessionStorage.getItem('Token');
				var timestamp=new Date().getTime();
				let para = {
					token: Token,
					timestamp: timestamp
				};
				this.loading = true;
				getPriceList(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.List = res.data;
						this.loading = false;
					}
				});
				// 获取交易设置
				getTradeStatus(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.Status = res.data;
						this.loading = false;
					}
				});
			},
			// 刷新token
			queryInfo() {
				var Token = sessionStorage.getItem('Token');
				var timestamp=new Date().getTime();
				let para = {token: Token,timestamp: timestamp};
				Refreshtoken(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.loading = false;
					}
				});
			},
			//获取用户列表
			getUsers: function() {
				var Token = sessionStorage.getItem('Token');
				var timestamp=new Date().getTime();
				let para = {
					token: Token,
					timestamp: timestamp
				};
				this.loading = true;
				getPriceList(para).then((res) => {
					var res = res.data;
					if (res.code != 0) {
						this.$message({
							message: res.message,
							type: 'error'
						});
					} else {
						this.List = res.data;
						this.loading = false;
					}
				});
			},
			//修改设置
			handleOpen(type){
				if(type == '0'){
					this.$confirm('确认关闭交易吗？', '提示', {}).then(() => {
						var Token = sessionStorage.getItem('Token');
						var timestamp=new Date().getTime();
						let para = {token: Token, timestamp:timestamp,tradeStatus:type};
						editTradeStatus(para).then((res) => {
							var res = res.data;
							if (res.code != 0) {
								this.$message({
									message: res.message,
									type: 'error'
								});
							} else {
								this.getPrice()
							}
						});
					});
				}else if(type == '1'){
					this.$confirm('确认开启交易吗？', '提示', {}).then(() => {
						var Token = sessionStorage.getItem('Token');
						var timestamp=new Date().getTime();
						let para = {token: Token, timestamp:timestamp,tradeStatus:type};
						editTradeStatus(para).then((res) => {
							var res = res.data;
							if (res.code != 0) {
								this.$message({
									message: res.message,
									type: 'error'
								});
							} else {
								this.getPrice()
							}
						});
					});
				}
				
			},
			// 修改角色
			handleEdit(index, row) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			//编辑
			editSubmit: function () {
				this.$refs.editForm.validate((valid) => {
					if (valid) {
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							this.editLoading = true;
							var Token = sessionStorage.getItem('Token');
							var timestamp=new Date().getTime();
							let para = Object.assign({token: Token, timestamp:timestamp,}, this.editForm);
							editPrice(para).then((res) => {
								this.editLoading = false;
								//NProgress.done();
								this.$message({
									message: '提交成功',
									type: 'success'
								});
								this.$refs['editForm'].resetFields();
								this.editFormVisible = false;
								this.getUsers();
							});
						});
					}
				});
			},
			cellStyle({row, column}){
				return 'text-align:center';
			},
			rowClass({row, column}){
				return 'text-align:center';
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
				    .then(_ => {
						done();
					})
					.catch(_ => {});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
		},
		beforeDestroy() {
		  clearInterval(this.timer);        
		  this.timer = null;
		}
	};
</script>

<style scoped>
.el-button.is-disabled{
	color: #bfcbd9;
	    cursor: not-allowed;
	    background-image: none;
	    background-color: #eef1f6;
	    border-color: #d1dbe5;
}
.el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #48576a;
}
.title{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.title_left{
	display:flex;
	align-items:center;
	justify-content:center;
}
.title_text{
	font-size:16px;
}
</style>
